<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>添加分类</title>
    [#include "/includes/header.html" /]
    <link rel="stylesheet" type="text/css" href="${webctx}/resources/css/product.css"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".col-md-8 ul>li").hover(function () {
                $(this).find("a").removeClass("hide");
                $(this).find("a").addClass("hover");
            }, function () {
                $(this).find("a").addClass("hide");
                $(this).find("a").removeClass("hover");
            });
        });

        function addPictureLogo(obj) {
            var params = {};
            params.model = obj;
            obz.selectImage(params, function (ImgPath, ImgUrl) {
                var newlistImg = ImgPath.split(",");
                var newlistImgUrl = ImgUrl.split(",");
                for (var i = 0; i < newlistImg.length; i++) {
                    if (obj) {
                        var reValue = $(".js-picture-logo li").find("input[name='img_path']").val();
                        if (typeof(reValue) == "undefined") {
                            $(".js-picture-logo").append('<li class="sort"><img src="' + newlistImg[i] + '" id="img_path"  class="js-img-preview">'
                                + '<input name="img_path" id="imgPath" value="' + newlistImgUrl[i] + '" type="hidden"  class="js-img-preview">'
                                + '<a class="js-delete-picture close-modal small hide" onclick="deleteImg(this);">×</a></li>');
                        } else {
                            $("#img_path").attr('src', newlistImg[i]);
                            $(".js-picture-logo li").find("input[name='img_path']").val(newlistImgUrl[i]);
                        }
                    }
                }
                $(".col-md-8 ul>li").hover(function () {
                    $(this).find("a").removeClass("hide");
                    $(this).find("a").addClass("hover");
                }, function () {
                    $(this).find("a").addClass("hide");
                    $(this).find("a").removeClass("hover");
                });
            });
        }

        function deleteImg(obj) {
            $(obj).parent().remove();
        }
    </script>
</head>
<body class="fixed-sidebar full-height-layout gray-bg">
[#include "/includes/menus.html" /]
<div class="wrapper wrapper-content">
    <div class="row content-tabs">
        <nav class="page-tabs J_menuTabs">
            <div class="page-tabs-content" style="margin-left: 0px;">
                <a href="${webctx}/product" class="J_menuTab">商品</a>
                <a href="${webctx}/category" class="J_menuTab active">分类 </a>
                <a href="${webctx}/specification" class="J_menuTab">规格 </a>
                <a href="${webctx}/delivery" class="J_menuTab">运费模板</a>
            </div>
        </nav>
    </div>
    <div class="ibox float-e-margins">
        <div class="ibox-title row">
            <h5>
                <small><a href="${webctx}/category">《返回列表</a></small>
            </h5>
        </div>
        <div class="row ibox-content active_statistics">
            <div class="title_query padtop">
                <form id="qiandaoForm" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-2 control-label">分类名称<span style="color: red;"><em>*</em></span></label>
                        <div class="col-md-8" id="error_name">
                            <input type="hidden" id="id" value="${productCategory.id}" class="input-xfat" name="id">
                            <input id="name" name="name" value="${productCategory.name }" maxlength="20" type="text"
                                   class="form-control" style="width: 200px">
                            <label class="control-label" for="name"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">分类图标</label>
                        <div class="col-md-8">
                            <ul class="js-picture-logo app-image-list">
                                <li><a href="javascript:;" onclick="addPictureLogo(true);"
                                       class="add-goods js-add-picture show">+加图</a></li>
                                [#if productCategory ??]
                                <li class="sort">
                                    <img src="${imgDomain}${productCategory.img_path}" id="img_path"
                                         class="js-img-preview"/>
                                    <input id="imgPath" name="img_path" value="${productCategory.img_path}"
                                           type="hidden" class="js-img-preview"/>
                                    <a class="js-delete-picture close-modal small hide" onclick="deleteImg(this);">×</a>
                                </li>
                                [/#if]
                            </ul>
                            <label id="logo_error_msg" style="color:red;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">描述</label>
                        <div class="col-md-8" id="error_seo_description">
                            <input id="seo_description" name="seo_description"
                                   value="${productCategory.seo_description}" maxlength="20" type="text"
                                   class="form-control" style="width: 200px">
                            <label class="control-label" for="seo_description"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">排序<span style="color: red;"><em>*</em></span></label>
                        <div class="col-md-2" id="error_orders">
                            <input id="orders" name="orders" value="${productCategory.orders }" maxlength="20"
                                   type="text" class="form-control" onkeyup="this.value=this.value.replace(/\D/g,'')">
                            <label class="control-label" for="error_orders"></label>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="panel-footer" align="center">
        <button onclick="saveCategory();" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i>提交</button>
    </div>
</div>

<script type="text/javascript">
    function saveCategory() {
        var params = {}, error = {};
        var categoryId = $("#id").val(), seoDescription = $("#seo_description").val(),
            categName = $("#name").val(), categOrder = $("#orders").val(), categImg = $("#imgPath").val();
        if (categoryId != null && categoryId != "") params.id = categoryId;
        if (categImg != null && categImg != "") params.img_path = categImg;
        if ($.trim(categName) == "") {
            error.error_name = "分类名称不能为空";
        } else {
            error.error_name = "";
            params.name = $.trim(categName);
        }
        if ($.trim(categOrder) == "") {
            error.error_orders = "分类排序不能为空";
        } else {
            error.error_orders = "";
            params.orders = $.trim(categOrder);
        }

        var hasError = false;
        for (var key in error) {
            if (error[key] != "") {
                if (!hasError) hasError = true;
                $("#" + key).addClass("has-error");
                $("#" + key).find("label").text(error[key]);
            } else {
                $("#" + key).removeClass("has-error");
                $("#" + key).find("label").empty();
            }
        }
        //主表信息不完整，返回
        if (hasError) return false;

        $.post(obz.ctx + "/category/save", params, function (resp) {
            if (resp.code == 200) {
                location.href = "${webctx}/category";
            }
        });
    }
</script>
<script>
    Template.init("#menu-goods");
</script>
</body>
</html>